<template>
        <el-card class="envir-card">
      <el-row>
        <el-col
          :xs="{span: 24}"
          :sm="{span: 24}"
          :md="{span: 24}"
          :lg="{span: 18}"
          :xl="{span: 18}"
        >
          <div>
            <!-- [1] 为 ECharts 准备一个具备大小 (宽高) 的 DOM -->
            <div id="chart1" ref="chart1"></div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :offset="2" :span="17" :xs="4" :sm="6" :md="8" :lg="16" :xl="16">
          <div>
            <!-- [1] 为 ECharts 准备一个具备大小 (宽高) 的 DOM -->
            <div id="chart2" ref="chart2" class="charts"></div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :offset="2" :span="17" :xs="4" :sm="6" :md="8" :lg="16" :xl="16">
          <div>
            <!-- [1] 为 ECharts 准备一个具备大小 (宽高) 的 DOM -->
            <div id="chart3" ref="chart3" class="charts"></div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :offset="2" :span="17" :xs="4" :sm="6" :md="8" :lg="16" :xl="16">
          <div>
            <!-- [1] 为 ECharts 准备一个具备大小 (宽高) 的 DOM -->
            <div id="chart4" ref="chart4" class="charts"></div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :offset="2" :span="17" :xs="4" :sm="6" :md="8" :lg="16" :xl="16">
          <div>
            <!-- [1] 为 ECharts 准备一个具备大小 (宽高) 的 DOM -->
            <div id="chart5" ref="chart5" class="charts"></div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :offset="2" :span="17" :xs="4" :sm="6" :md="8" :lg="16" :xl="16">
          <div>
            <!-- [1] 为 ECharts 准备一个具备大小 (宽高) 的 DOM -->
            <div id="chart6" ref="chart6" class="charts"></div>
          </div>
        </el-col>
      </el-row>
    </el-card>
</template>

<script>
export default {
    

      mounted() {
    // [3] 基于准备好的 DOM，初始化 Echarts 实例
    // 使用 ref 访问 DOM, 也可以使用 document.getElementById('chart')
    this.chart1 = echarts.init(this.$refs.chart1);

    // [4] 设置 Echarts 图表数据
    this.chart1.setOption({
      title: {
        text: "光照强度"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross"
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ["光照强度均值(Lux)"]
      },
      xAxis: {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月"
        ]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          name: "光照强度均值(Lux)",
          data: [
            55056,
            44853,
            54655,
            57064,
            69532,
            113200,
            100122,
            99543,
            93812,
            65467,
            65443,
            56325
          ],
          type: "line",
          smooth: true
        }
      ],
      grid: {
        left: "10%",
        bottom: "10%",
        top: "10%",
        right: "10%"
      }
    });

    this.chart2 = echarts.init(this.$refs.chart2);

    // [4] 设置 Echarts 图表数据
    this.chart2.setOption({
      title: {
        text: "土壤ph值"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross"
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ["土壤ph均值"]
      },
      xAxis: {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月"
        ]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          name: "土壤ph均值",
          data: [6.4, 6.4, 6.7, 7, 6.9, 7.1, 6.5, 7.2, 6.4, 6.6, 7.2, 7],
          type: "line",
          smooth: true
        }
      ]
    });

    this.chart3 = echarts.init(this.$refs.chart3);

    // [4] 设置 Echarts 图表数据
    this.chart3.setOption({
      title: {
        text: "土壤温度"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross"
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ["土壤温度均值(℃)"]
      },
      xAxis: {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月"
        ]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          name: "土壤温度均值(℃)",
          data: [12, 13, 18, 22, 26, 30, 32, 33, 26, 23, 18, 12],
          type: "line",
          smooth: true
        }
      ]
    });

    this.chart4 = echarts.init(this.$refs.chart4);

    // [4] 设置 Echarts 图表数据
    this.chart4.setOption({
      title: {
        text: "土壤湿度"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross"
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ["土壤湿度均值(%RH)"]
      },
      xAxis: {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月"
        ]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          name: "土壤湿度均值(%RH)",
          data: [67, 76, 88, 84, 79, 80, 89, 88, 78, 75, 80, 65],
          type: "line",
          smooth: true
        }
      ]
    });

    this.chart5 = echarts.init(this.$refs.chart5);

    // [4] 设置 Echarts 图表数据
    this.chart5.setOption({
      title: {
        text: "空气温度"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross"
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ["空气温度均值(℃)"]
      },
      xAxis: {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月"
        ]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          name: "土壤湿度均值(%RH)",
          data: [14, 15, 18, 22, 26, 28, 30, 30, 27, 25, 19, 16],
          type: "line",
          smooth: true
        }
      ]
    });

    this.chart6 = echarts.init(this.$refs.chart6);

    // [4] 设置 Echarts 图表数据
    this.chart6.setOption({
      title: {
        text: "土壤湿度"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross"
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ["空气湿度"]
      },
      xAxis: {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月"
        ]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          name: "空气湿度均值(%RH)",
          data: [30, 36, 38, 34, 39, 40, 44, 41, 48, 43, 40, 37],
          type: "line",
          smooth: true
        }
      ]
    });
  }
}
</script>